<template>
  <!-- 邮件管理 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="mailDataList" @query="getMailList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="类型:" label-width="50px">
            <el-select class="width80" v-model="listQuery.type" placeholder="请选择多语言" style="width:200px">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="公告" :value="1"></el-option>
              <el-option label="邮件" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button v-permission="'mailManage.add'" type="primary" size="mini" icon="el-icon-plus" @click="isShowDetails = true, checkedItem = null">新增</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getMailList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.isChecked" :label="true" @change="handleCurrentChange(scope.row)">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" align="center" width="100">
            <template slot-scope="scope">
              <el-tag effect="plain" type="">{{ scope.row.type==1?'公告':'邮件'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="is_delay_send" label="发送类型" align="center" width="100">
            <template slot-scope="scope">
              <el-tag  effect="plain" type="danger">{{ scope.row.is_delay_send==1?'定时发送':'立刻发送'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="api_status" label="发送状态" align="center" width="100">
            <template slot-scope="scope">
              <el-tag :type="mailType(scope.row.api_status)">{{ mailLabel(scope.row.api_status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="title_id" label="标题" align="center" width="300">
            <template slot-scope="scope">
              <span>{{ languageArrayMap.get(scope.row.title_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="content_id" label="内容" align="center" width="300">
            <template slot-scope="scope">
              <span>{{ languageArrayMap.get(scope.row.content_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="send_user_id" label="用户ID" align="center" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.send_user_id }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="items" label="道具" align="center" width="350">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.propData" :key="index">
                {{ item.label }}【<span class="colorRed">{{ item.num }}</span>】
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="filter_json" label="玩家筛选条件" align="center" width="200">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.filter_json" :key="index">
                【<span>{{ item.filter_type==1?'玩家ID':'VIP等级' }}{{ item.filter_condition }}{{ item.filter_value }}</span>】
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="delay_send_time_str" label="定时发送时间" align="center" width="200"/>
          <el-table-column prop="effect_time_str" label="邮件保存有效期" align="center" width="200"/>
          <el-table-column prop="receive_end_time_str" label="接收截止时间" align="center" width="200"/>
          <el-table-column prop="operation" label="操作" align="left" fixed="right" width="180" >
            <template slot-scope="scope">
              <el-tooltip effect="dark" v-permission="'mailManage.edit'" content="编辑" placement="top-start">
                <el-button size="mini" :disabled="!scope.row.test_send_user_id && scope.row.api_status==2?true:false" type="warning" @click.stop="editItem(scope.row)" icon="el-icon-edit-outline" />
              </el-tooltip>
              <el-tooltip effect="dark" v-permission="'mailManage.delete'" content="删除" placement="top-start">
                <el-button size="mini" type="danger" @click="deleteItem(scope.row)" icon="el-icon-delete"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getMailList" />
        </template>
      </search-table>
      <page-details :show="isShowDetails" :data="checkedItem" @onHideDetails="onHideDetails" :propDataArray="propDataArray" :languageArray="multilingualData"/>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  getMail,
  delMail
} from '@/api/config'
import {
  allAdminMultilingual
} from '@/api/game'
import PageDetails from './page-details.vue'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'mail',
  components: {
    PageDetails,
    SearchTable
  },
  data () {
    return {
      listQuery: {
        page: 1,
        size: 50,
        type:0
      },
      propDataArray: this.$store.state.commonState.propDataArray,
      languageArrayMap: new Map(),
      multilingualData: [],
      isShowDetails: false,
      checkedItem: null,
      listLoading: true,
      mailDataList: [],
      statusDataList: [
        {label: '默认',value: 0,type: ''},
        {label: '待通知',value: 1,type: 'primary'},
        {label: '通知成功',value: 2,type: 'success'},
        {label: '通知失败',value: 3,type: 'info'},
      ],
      currentTotal: 0,
    }
  },
  created () {
    // this.getMultilingualList()
  },
  activated(){
    this.propDataArray=this.$store.state.commonState.propDataArray
    this.getMultilingualList()
  },
  methods: {
    // 获取邮件列表
    async getMailList (query) {
      let that = this,params=that.listQuery;
      that.mailDataList = []
      that.checkedItem = null
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      const response = await getMail(params)
      if (response.code == 1) {
        if (response.data.list) {
          response.data.list.forEach(item => {
            item.isChecked = false
            item.propData=that.propBack(item.items)
          })
          that.mailDataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 获取全部后台多语言
    async getMultilingualList () {
      let that = this;
      that.multilingualData = []
      const response = await allAdminMultilingual({})
      if (response.code == 1) {
        if(response.data){
          const languageArrayMap = new Map();
          response.data.forEach(s => {
            languageArrayMap.set(s.a_base_message_id, s.c_base_zh_cn);
          });
          that.multilingualData = response.data
          that.languageArrayMap = languageArrayMap;
        }
      }else{
        that.$message.error(response.msg)
      }
      that.getMailList();
    },
    // 订单展示
    mailLabel(cellValue){
      return (this.statusDataList.find((item) => item.value === cellValue)?.label || "-");
    },
    // 订单状态
    mailType(cellValue){
      return (this.statusDataList.find((item) => item.value === cellValue)?.type || "-");
    },
    // 编辑/查看
    editItem (row) {
      this.isShowDetails=true
      this.checkedItem=row
      this.handleCurrentChange(row)
    },
    // 删除
    deleteItem (row) {
      let that = this;
      that.handleCurrentChange(row)
      that.$confirm(`是否删除【${that.languageArrayMap.get(row.title_id)}】邮件?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMail({
          id: row.id
        }).then(res => {
          if (res.code == 1) {
            that.getMailList()
            that.$message({
              type: 'success',
              message: res.msg
            })
          }
        })
      }).catch((err) => {})
    },
    // 选择表格数据
    handleCurrentChange (val) {
      this.checkedItem = val
      this.mailDataList.map(item => {
        if (item.id === val.id) {
          item.isChecked = true
        } else {
          item.isChecked = false
        }
      })
    },
    // 转换道具
    propBack (str) {
      let arr = this.$public.srtToArr(str), arrData = [];
      if (arr[0] && typeof (arr[0]) == 'string') {
        this.propDataArray.map(item=>{
          if(item.value==arr[0]){
            arrData.push({ label: item.label, num: this.$public.mathNumberDivideWan(Number(arr[1])) , type:item.value})
          }
        })
      } else {
        arr.map(item => {
          this.propDataArray.map(second=>{
            if(second.value==item[0]){
              arrData.push({ label: second.label, num: this.$public.mathNumberDivideWan(Number(item[1])) , type:item.value})
            }
          })
        })
      }
      return arrData
    },
    onHideDetails (show) {
      this.isShowDetails = false
      if (show) {
        this.getMailList()
      }
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        type:0
      }
      this.getMailList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
.pic-url {
  width: 90px;
  display: inline-block;
  object-fit: cover;
  border-radius: 4px;
}
</style>
